Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.

Login Member

Materi Mata Kuliah

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

03 jam 10 menit 00 detik

02 jam 10 menit 00 detik

02 jam 09 menit 00 detik

02 jam 01 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 38 menit 00 detik

00 jam 10 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

Pengenalan Template WebsitePengenalan Template Website: Jenis, Struktur dan Perbedaannya

Template website adalah kerangka atau desain awal yang sudah dibuat sebelumnya dan dapat digunakan kembali untuk mempercepat pembuatan website.

Template biasanya sudah memiliki:

  • Struktur HTML
  • Desain (CSS)
  • Interaksi dasar (JavaScript)

👉 Sehingga developer tidak perlu membuat dari nol.

Tujuan Penggunaan Template

  • Mempercepat proses development
  • Mempermudah desain UI
  • Menjaga konsistensi tampilan
  • Menghemat waktu dan biaya

Contoh Penggunaan

  • Website company profile
  • Website toko online
  • Dashboard admin
  • Landing page

2. Jenis Template Website

Template website dibagi menjadi beberapa jenis berdasarkan fungsi dan teknologi yang digunakan.

1. Template HTML (Static Template)

Template berbasis HTML murni tanpa framework.

Ciri-ciri:

  • Struktur sederhana
  • Tidak menggunakan framework CSS
  • Mudah dipelajari

Contoh:

 
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
</head>
<body>
<h1>Selamat Datang</h1>
</body>
</html>
 

👉 Cocok untuk pemula.

2. Template Bootstrap

Template yang menggunakan framework Bootstrap.

Ciri-ciri:

  • Responsive
  • Banyak komponen siap pakai
  • Menggunakan grid system

Contoh:

 
<div class="container">
<div class="row">
<div class="col-md-6">Kolom 1</div>
<div class="col-md-6">Kolom 2</div>
</div>
</div>
 

👉 Cocok untuk website modern.

3. Admin Template (Dashboard)

Template khusus untuk Back Office (admin).

Ciri-ciri:

  • Ada sidebar menu
  • Dashboard (grafik, statistik)
  • Form dan tabel data

Contoh:

  • AdminLTE
  • SB Admin

3. Struktur Dasar Template Website

Hampir semua template memiliki struktur yang sama:

1. Header

Bagian atas website.

Isi:

  • Logo
  • Judul website
  • Navbar/menu

Contoh:

 
<header>
<h1>My Website</h1>
<nav>Menu</nav>
</header>
 

2. Content (Main Content)

Bagian utama yang berisi informasi.

Isi:

  • Artikel
  • Produk
  • Konten utama

Contoh:

 
<main>
<h2>Konten Utama</h2>
<p>Isi halaman</p>
</main>
 

3. Footer

Bagian bawah website.

Isi:

  • Copyright
  • Kontak
  • Link tambahan

Contoh:

 
<footer>
<p>© 2026 Website</p>
</footer>
 

Struktur Lengkap

 
<!DOCTYPE html>
<html>
<head>
<title>Template</title>
</head>
<body>

<header>Header</header>

<main>Content</main>

<footer>Footer</footer>

</body>
</html>
 

4. Perbedaan Template Frontend dan Admin

Template Frontend (User Front)

Digunakan untuk pengguna umum.

Ciri-ciri:

  • Fokus tampilan menarik (UI/UX)
  • Banyak gambar dan desain visual
  • Navigasi user-friendly

Contoh halaman:

  • Beranda
  • Tentang
  • Produk
  • Kontak

Template Admin (Back Office)

Digunakan oleh admin.

Ciri-ciri:

  • Fokus pada data dan fungsi
  • Banyak tabel dan form
  • Ada sidebar menu

Contoh halaman:

  • Dashboard
  • Data user
  • Input produk
  • Laporan

Perbandingan

Aspek Frontend Admin
Pengguna User umum Admin
Fokus Tampilan Data
Desain Menarik Fungsional
Komponen Banner, gambar Tabel, form

5. Contoh Implementasi Sederhana

Frontend

 
<h1>Selamat Datang di Website</h1>
<p>Ini halaman user</p>
 

Admin

 
<h1>Dashboard Admin</h1>
<table>
<tr><td>Data</td></tr>
</table>
 

Kesimpulan

Template website adalah solusi praktis untuk mempercepat pembuatan website dengan menyediakan struktur dan desain siap pakai. Terdapat berbagai jenis template seperti HTML, Bootstrap, dan admin template yang memiliki fungsi berbeda sesuai kebutuhan. Dengan memahami struktur dasar serta perbedaan antara template frontend dan admin, mahasiswa dapat lebih mudah memodifikasi dan mengembangkan website secara profesional.

Report Error